<template>
<div id="video_container">
  <el-progress v-if="filePercent && filePercent < 100" :percentage="filePercent"></el-progress>
</div>
</template>

<script>
  require('qiniu-js/dist/qiniu.min.js')

  export default {
    data() {
      return {
        fileAllSize: '',
        fileLoaded: '',
        fileSpeed: '',
        filePercent: '',
        uploader: null,
        fileData: {
          _id: undefined,
          url: undefined,
          size: undefined
        }
      }
    },
    props: {
      uptoken: {
        type: String,
        required: true
      },
      browse_button: {
        type: String,
        required: true
      },
      upkey: {
        type: String,
        required: true
      },
      accept: {
        type: String,
        required: true
      }
    },
    mounted() {
      const Qiniu = global.Qiniu
      const _this = this
      this.uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: _this.browse_button,
        uptoken: _this.uptoken,
        get_new_uptoken: false,
        unique_names: false,
        save_key: false,
        bucket_name: 'bucket_name',
        domain: 'domain',
        container: 'video_container',
        max_file_size: '2000mb',
        dragdrop: true,
        drop_element: 'video_container',
        chunk_size: '4mb',
        max_retries: 3,
        auto_start: true,
        multi_selection: false,
        filters: {
          prevent_duplicates: true,
          mime_types: [
            {
              title: 'upload files',
              extensions: _this.accept
            }
          ]
        },
        init: {
          'UploadProgress': function(up, file) {
            console.log('UploadProgress')
            _this.filePercent = parseInt(file.percent)
          },
          'FileUploaded': function(up, file, info) {
            const response = JSON.parse(info.response)
            _this.fileData._id = response.data.file._id
            _this.fileData.url = response.data.file.url
            _this.fileData.size = response.data.file.size
            _this.$emit('on-success', _this.fileData)
          },
          'Error': function(up, err, errTip) {
            console.log('Error =')
            console.log(err)
            console.log('errTip =')
            console.log(errTip)
          },
          'Key': function(up, file) {
            return _this.upkey
          }
        }
      })
    }
  }
</script>

<style>
</style>
